<template>
  <div>
    <v-card title="旭日图-旋转标签">
      <vcu-chart-sunburst :data="chartData" :settings="chartSettings" />
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        dimensions: {
          name: "",
          data: [],
        },
        measures: [
          {
            name: "",
            data: [
              {
                value: 8,
                children: [
                  {
                    value: 4,
                    children: [
                      { value: 2 },
                      { value: 1 },
                      { value: 1 },
                      { value: 0.5 },
                    ],
                  },
                  { value: 2 },
                ],
              },
              { value: 4, children: [{ children: [{ value: 2 }] }] },
              { value: 4, children: [{ children: [{ value: 2 }] }] },
              { value: 3, children: [{ children: [{ value: 1 }] }] },
            ],
          },
        ],
      },
      chartSettings: {
        silent: true,
        radius: ["15%", "80%"],
        sort: null,
        highlightPolicy: "ancestor",
        levels: [
          {},
          { itemStyle: { color: "red" }, label: { rotate: "radial" } },
          { itemStyle: { color: "orange" }, label: { rotate: "tangential" } },
          { itemStyle: { color: "yellow" }, label: { rotate: 0 } },
        ],
        label: {
          color: "#fff",
          textBorderColor: "#666",
          textBorderWidth: 2,
          borderColor: "#999",
          borderWidth: 1,
          formatter: function (param) {
            let depth = param.treePathInfo.length;
            if (depth === 2) {
              return "radial";
            } else if (depth === 3) {
              return "tangential";
            } else if (depth === 4) {
              return "0";
            }
          },
        },
      },
    };
  },
  methods: {},
  created() {},
};
</script>
<style lang="less" scoped>
</style>
